<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            font-family: 'Poppins',sans-serif;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 100vh;
            background: #0f0f0f;
            overflow: hidden;
        }
        #yin audio{
            width: 180px;
            float: left;
            display: none;
        }

        .container{
            margin-top: 350px;
            position: relative;
            width: 100%;
            display: flex;
            justify-content:center;
            align-items: center;
        }
        .container .card{
            position: absolute;
            width: 240px;
            height: 360px;
            /* background: #5e5cfc;  */
            border-radius: 8px;
            display: flex;
            justify-content:center;
            align-items: center;
            /* color: rgba(0, 0,0, 0); */
            font-size: 8em;
            border: 10px solid rgba(0, 0,0,.1);
            transition: .5s;
            transform-origin: 50% 100%;
            /* filter: hue-rotate(calc(var(--i)*60deg)); */
            /* box-shadow: 0 15px 50px rgba(0, 0,0, 1); */
        }
        .container:hover .card{
             transform: rotate(calc(var(--i)*5deg))
                        translate(calc(var(--i) *120px),-50px);
             box-shadow: 0 15px 50px rgba(0, 0,0, .25);
             color: rgba(0, 0,0, .25); 
             cursor: pointer;
        }
        .container:active  img:not(:active){
            opacity: 0.3;
            background-color: darkgray;
        }
    
         .card img:hover{
            transform: scale(1.1,1.1);
         }
         img:hover>img:not(:hover){
            filter: blur(50px);
            transform: scale(0.7,0.7);
         }
        .container .card:active{
            translate: calc(var(--i)*20px) -50px;
            z-index: 999;
        }
        img{
            width: 260px;
            height: 360px;
            border-radius: 8px;
        }
       div{
        width: 50px;
        height: 50px;
        font-size: 30px;
        float: right;
       }
    </style>
</head>
<body>
<div id="yin">
    <audio  autoplay  loop>
        <source src="./img/抽卡片.ogg" >
    </audio>
</div>
    <div class="container">
        <div class="card" style="--i:-4;"><img src="./img/抽牌.png" ></div>
        <div class="card" style="--i:-3;"><img src="./img/抽牌2.png" ></div>
        <div class="card" style="--i:-2;"><img src="./img/抽牌3.png" ></div>
        <div class="card" style="--i:-1;"><img src="./img/抽牌4.png" ></div>
        <div class="card" style="--i:0;"><img src="./img/抽牌5.png" ></div>
        <div class="card" style="--i:1;"><img src="./img/抽牌6.png"></div>
        <div class="card" style="--i:2;"><img src="./img/抽牌7.png"></div>
        <div class="card" style="--i:3;"><img src="./img/抽牌8.png"/></div>
        <div class="card" style="--i:4;"><img src="./img/抽牌9.png" ></div>
    </div>

    <div>
        <a href="./首页.html">返回</a>
    </div>
</body>
</html>